<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>品种百科</title>
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_758057_q4trxcd7gtr.css" />
	    <link rel="stylesheet" href="http://at.alicdn.com/t/font_757962_6ve2sfnfjsk.css">
		<link rel="shortcut icon"type="image/x-icon" href="images/logo.png" media="screen" />

		<style>
			*{padding:0;margin:0;}
			html,body{width:100%;height:100%;}
			li{list-style: none;}
			a{text-decoration: none;}
			.header {
				width: 100%;
			    height: 40px;
			    position: absolute;
			    top: 0;
			    background: #000;
			    z-index: 777;
			}
.header ul {
	display: block;
	width: 900px;
	margin: 0 auto;
}
.header .iconfont{
	color: #fff;
}

.header ul li {
	float: left;
	margin-right: 100px;
	line-height: 40px;
	margin-left: 15px;	
}
.header ul li:last-child {
	margin-right: 0;
}
.header ul li a {
	color: black;
	font-weight: bold;
	color:#fff;
}
.header ul li a:hover {
	color: green;
}
			header{
				margin:10px auto;
				width:1100px;
				height:700px;	
			}	
			header ul {
				width:120px;
				position:absolute;
				top:660px;
				left:550px;
				z-index: 99;
				display:inline-flex;
			}
			header li {
				width: 20px;
				height:20px;
				align-items: center;
			}
			header li:nth-of-type(2){
				margin-left:30px;
				margin-right:30px;
			}
			header li a {
				width: 100%;
				height:100%;
			}
			header .panels {
				clear: both;
				position: relative;
				width:100%;
				height:100%;
			}
			header article {
				position: absolute;
				width:100%;
				height:100%;
				top: 0;
				left: 0;
			}
			header article img{
				width:100%;
				height:100%;
			}
			header .active-panel {
				z-index: 1;
			}
			header li a div{
				width:20px;
				height:20px;
				background-color: #fff;
				border-radius: 50%;
			}
			header li a:focus div,header li a:hover div{
				background-color: gray;
			}
			header li a.active div{
				background-color: gray;
			}
			
			.vBanner{
				margin:30px auto;
				width:820px;
				height:580px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
			.vBanner .top{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
			.vBanner .top>img{
				width:290px;
				height:270px;
			}
			.vBanner .top>article{
				width:520px;
				margin-left:10px;
			}
			.vBanner .top>article h2{
				color:#555f4e;
				text-align:center;
				margin-bottom: 5px;
				font-size:20px;
			}
			.vBanner .top>article p{
				color:#8f9c81;
				text-indent: 32px;
				line-height:22px;
				font-size:15px;
			}
			.vBanner .bot{
				width:100%;
				height: 280px;
				display: flex;
				flex-direction: row;
				justify-content:center;
				align-items: center;
			}
			.vBanner .bot>li{
				width:21%;
				height:100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.vBanner .bot>li:nth-of-type(2){
				margin-left:3%;
				margin-right:3%;
			}
			.vBanner .bot>li:nth-of-type(3){
				margin-right:3%;
			}
			.vBanner .bot>li img{
				width:170px;
				height:150px;
			}
			.vBanner .bot>li i{
				font-size:35px;
				color:#91a749;
				margin-top:17px;
			}
			.vBanner .bot>li p{
				color:#8f9c81;
				line-height:22px;
				font-size:15px;
				margin-top:8px;
			}

footer{
	width:100%;
	height:100px;
}
footer .weibu{
	margin-top: 30px;
	padding-top: 10px;
	padding-bottom: 30px;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100px;
	background: #000;
}
footer .weibu .wb{
	width: 20%;
	height: 100px;
	margin-left: 70px;
}
footer .weibu .wb span{
	/*text-align: center;*/
	padding-left: 70px;
	font-size: 16px;
	color:#414d37;
}
footer .weibu .wb span1{
	font-size: 12px;
	color:#414d37;
	padding-left: 76px;
}
footer .weibu .wb .to{
	width: 214px;
	height: 100px;
}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<li><a onclick="window.location = 'index.html' " href="###">首页</a></li>
				<li><a onclick="window.location = 'Douruoindex.html' " href="###">多肉植物</a></li>
				<li><a  onclick="window.location = 'html/shoppingCar.html' " href="###">购物车</a></li>
				<li><a href="">品种百科</a></li>
				<li><a onclick="window.location = '联系我们.html' " href="###">联系我们</a></li>
				<li><i class="iconfont icon-sousuo"></i></li>
			</ul>
		</div>
		<header>
			<ul>
				<li><a href="#" class="active"><div></div></a></li>
				<li><a href="#"><div></div></a></li>
				<li><a href="#"><div></div></a></li>
			</ul>
			<div class="panels">
				<article class="active-panel"><img src="image/img1.jpg" alt=""/></article>
				<article><img src="image/img2.jpg" alt="" /></article>
				<article><img src="image/img3.jpg" alt="" /></article>
			</div>
		</header>
		<div class="vBanner">
			<div class="top">
				<img src="image/vImg1.jpg" />
				<article>
					<h2>白牡丹</h2>
					<p>景天科多肉植物，由风车草属的胧月与拟石莲花属的静夜再叫培育而来。敬茎叶多肉化，叶色灰白至灰绿，叶片表面有淡淡的白粉。</p>
					<p>另外，叶尖在阳光下会出现轻微的粉红色，茎健壮，互生叶排列成莲座形，叶片倒卵形，先端急尖，白色的叶子如牡丹花绽开，子株坚韧而繁多。歧伞花序自叶腋伸出，花半开形，5瓣浓黄色，颜色透明，花瓣上有红色细点，开花期在春季。</p>
					<p>Succulent plants,such as this Aloe,store water in their fleshly leaves.In botany,succulent plants,also known an succulents or sometimes fat plants,are plants having some parts that are more than normally thickened and fleshly,usually to retain water in arid climates or soil conditions.</p>
				</article>
			</div>
			<div class="bot">
				<li>
					<img src="image/vImg2.jpg" alt="" />
					<i class="iconfont icon-taiyang3-hei"></i>
					<p>高温时注意通风，防止长时间暴晒，以免晒伤。</p>
				</li>
				<li>
					<img src="image/vImg3.jpg" alt="" />
					<i class="iconfont icon-shuidi"></i>
					<p>10天左右一次，每次浇头即可鲜艳。</p>
				</li>
				<li>
					<img src="image/vImg4.jpg" alt="" />
					<i class="iconfont icon-guangzhao"></i>
					<p>光照越充足，昼夜温差越大，叶片色彩越鲜艳。</p>
				</li>
				<li>
					<img src="image/vimg5.jpg" alt="" />
					<i class="iconfont icon-jiandao"></i>
					<p>修剪顶部枝叶进行塑性控制植株高度，以维持株型的优美。</p>
				</li>
			</div>
		</div>

	<footer>
		<div class="weibu">
			<div class="wb">
				<span>企业中心</span><br><br>
				<span1>企业合作</span1><br>
				<span1>合作伙伴</span1><br>
				<span1>团队介绍</span1>
			</div>
			<div class="wb">
				<span>产品中心</span><br><br>
				<span1>多肉植物</span1><br>
				<span1>水生植物</span1><br>
				<span1>种植材料</span1>
			</div>
			<div class="wb">
				<span>关于我们</span><br><br>
				<span1>设计中心</span1><br>
				<span1>帮助中心</span1><br>
			</div>
			<div class="wb">
				<span>联系方式</span><br><br>
				<span1>8384868</span1><br>				
			</div>
		</div>
	</footer>
	<script>
		var tabs = document.querySelectorAll('header li a');
		var panels = document.querySelectorAll('header article');
		for(i = 0; i < tabs.length; i++) {
			var tab = tabs[i];
			setTabHandler(tab, i);
		}
		function setTabHandler(tab, tabPos) {
		tab.onmousemove = function() {
		for(i = 0; i < tabs.length; i++) {
			tabs[i].className = '';
		}
		tab.className = 'active';
		for(i = 0; i < panels.length; i++) {
			panels[i].className = '';
		}
		panels[tabPos].className = 'active-panel';
		}
		}
	</script>
	</body>
</html>
